<template>
  <div>
    <h1 style="text-align: center;">员工离职登记</h1>
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle"
               style="padding: 0;"
               :close-on-click-modal="false"
               width="33%"></el-dialog>
    <div style="text-align: center; margin-top: 50px; margin-left: 40%">
      <el-form :model="retire" :rules="retireRules" ref="addRetireForm">
        <div>
          <el-row>
            <el-col :span="5">
              <div>
                <el-form-item label="员工工号:" prop="eid">
                  <el-input onkeyup="this.value=this.value.replace(/\D|^0/g,'')" prefix-icon="el-icon-edit" v-model="retire.eid" size="mini" style="width: 300px"
                            placeholder="请输入员工工号"></el-input>
                </el-form-item>
                <el-form-item label="员工姓名:" prop="empName">
                  <el-input prefix-icon="el-icon-edit" v-model="retire.empName" size="mini" style="width: 300px"
                            placeholder="请输入员工姓名"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <div>
                <el-form-item label="离退时间:" prop="retireDate">
                  <el-date-picker
                    v-model="retire.retireDate"
                    size="mini"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    style="width: 300px"
                    type="date"
                    placeholder="离退时间">
                  </el-date-picker>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div>
                <el-form-item label="离退类别:" prop="retireType">
                  <el-radio-group v-model="retire.retireType">
                    <el-radio label="0">内部辞退</el-radio>
                    <el-radio style="margin-left: 15px;margin-top: 2px;" label="1">个人离职</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="5">
              <div>
                <el-form-item label="离职原因:" prop="retireReason">
                  <el-input
                    type="textarea"
                    size="mini"
                    style="width: 300px;"
                    :autosize="{ minRows: 5, maxRows: 10}"
                    placeholder="请输入离职原因..."
                    v-model="retire.retireReason"></el-input>
                </el-form-item>
              </div>
              <div style="margin-left: 240px">
                <el-button size="mini" type="primary" @click="addRetire('addRetireForm')">确定</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogTitle: '成功',
      dialogVisible: false,
      deleteId: '',
      retire: {
        eid: '',
        empName: '',
        retireDate: '',
        retireType: '',
        retireReason: ''
      },
      retireRules: {
        empName: [{required: true, message: '必填:员工姓名', trigger: 'blur'}],
        eid: [{required: true, message: '必填:员工工号', trigger: 'blur'}],
        retireDate: [{required: true, message: '必填:离职日期', trigger: 'blur'}],
        retireType: [{required: true, message: '必填:离退类别', trigger: 'blur'}]
      }
    };
  },
  methods: {
    addRetire(formName) {
      var _this = this;
      this.deleteId = this.retire.eid;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.postRequest("/personnel/retire/addretire", this.retire).then(resp => {
            if (resp && resp.status === 200) {
              _this.dialogVisible = false;
              this.emptyRetireData();
            }
          });
        } else {
          return false;
        }
      });
    },
    deleteEmployee(formName) {
      this.addRetire(formName);
      setTimeout(()=>{
        //先让数据库的数据加载进去数组中
        this.doDelete(this.deleteId);
      },500)

    },
    doDelete(ids) {
      this.deleteRequest("/employee/basic/emp/" + ids).then(resp => {
        if (resp && resp.status === 200) {
          console.log('success')
        }
      })
      this.deleteId = '';
    },
    emptyRetireData() {
      this.retire = {
        eid: '',
        empName: '',
        retireDate: '',
        retireType: '',
        retireReason: ''
      }
    }
  }
};
</script>
